{extend name="mainadmin@layouts/base" /}
{block name="head"}
<link href="__STATIC__/main/css/stylesheets/uploadify/uploadify.min.css" rel="stylesheet"/>
<style>
    #imgsList li{
        float: left;
        display: inline;
        width: 134px;
        height: 134px;
        margin-right: 12px;
        font-size: 12px;
        position: relative;
    }
    #imgsList li .item_box {
        display: block;
        width: 130px;
        height: 130px;
        padding: 8px 5px;
        border: #d3d3d3 2px solid;
        background-color: #f6f6f6;
        text-align: center;
    }
    .item_box img {
        max-width: 100%;
        max-height: 100%;
    }
    #imgsList li.select .item_box{
        border: #fb6638 2px solid;
    }
</style>
{/block}
{block name="main" }
<header class="header b-b clearfix">

    <div class="page-breadcrumbs">
        <ul class="breadcrumb">
            <li>
                <i class="fa fa-ellipsis-v"></i>
                <strong>上传商品</strong>
            </li>
        </ul>
        <a class="text-muted pull-right m-t-md m-r pointer" data-toggle="back" title="返回"><i
                class="fa fa-reply"></i></a>
    </div>

</header>
<form class="form-horizontal form-validate form-modal form_vbox" method="post" action="{:url('add')}">
<section class="vbox">
    <section class="scrollable wrapper w-f ">
        <section class="panel panel-default ">
            <div class="widget-body">
                <div class="collapse in">
                    <div class="form-group">
                        <label class="control-label col-sm-2">选择商品</label>
                        <div class="col-sm-8">
                            <input id="goods_keyword" type="text" class="input-medium " placeholder="商品名称/SN"
                                   aria-invalid="false">

                            <a class="btn btn-default fa fa-search" title="搜索" onclick="searchGoods()"></a>

                            <select id="goods_select" class="m-r" style="width:250px;" data-toggle="select2"
                                    onChange="goodsSelect()">
                                <option value="">选择商品</option>
                            </select>
                        </div>
                    </div>


                    <div class="form-group">
                        <label class="control-label col-sm-2">商品名称</label>
                            <div class="col-sm-6">
                                <input type="hidden" name="shop_goods_id" id="shop_goods_id" value="">
                                <input type="hidden" name="shop_goods_img" id="shop_goods_img" value="">
                                <input type="text" class="input-max" name="name" id="name" minlength="2" maxLength="50" data-rule-required="true" value="">
                            </div>
                            <span class="tooltip-darkorange fa fa-question-circle" data-toggle="tooltip" data-placement="right" data-original-title="最长50个汉字，1个汉字相当于2个字符"></span>

                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-2">商品图片</label>
                        <div class="col-sm-8" id="imgsList">

                        </div>
                    </div>

                    <div class="form-group tableBox hide">
                        <label class="control-label col-sm-2">商品sku</label>
                        <div class="col-sm-8 m-t-md" id="tableBox">
                        </div>
                    </div>
                    <div class="tableBox2 hide">
                        <div class="form-group">
                            <label class="control-label col-sm-2">售卖价格</label>
                            <div class="col-sm-8" >
                                <input type="text" class="input-mini" name="sale_price" data-rule-required="true"  data-rule-ismoney="true" value="">
                                <span class="tooltip-darkorange fa fa-question-circle" data-toggle="tooltip" data-placement="right"
                                  data-original-title="数字，单位分"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2">市场价格</label>
                            <div class="col-sm-8" >
                                <input type="text" class="input-mini" name="market_price" data-rule-required="true"  data-rule-ismoney="true" value="">
                                <span class="tooltip-darkorange fa fa-question-circle" data-toggle="tooltip" data-placement="right"
                                  data-original-title="数字，单位分"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2">库存</label>
                            <div class="col-sm-8" >
                                <input type="text" class="input-mini" name="stock_num" data-rule-required="true"  data-rule-ismoney="true" value="">
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="control-label col-sm-2">商品资质图片：</label>
                        <div class="col-sm-9">
                            <div class="js_upload_container">
                                <div class="js_file_upload ">
                                    <button type="button" class="btn btn-default js_new_upload" 
                                            data-submitname="images" data-file_type="big_picture" data-uploadpath="{:url('uploadImg')}"
                                            data-delpath="{:url('removeImg')}" style="position: relative; z-index: 1;">
                                        上传图片
                                    </button>
                                    <span class="maroon">*</span>
                                    <span class="help-inline"><small>图片格式：JPG、PNG格式，图片小于20MB， (可拖拽图片调整显示顺序) </small></span>
                                </div>
                                <div class="uploadify-queue js_file_upload_queue">
                                </div>
                                <ul class="ipost-list ui-sortable js_fileList share_img_list" data-required="true">
                                </ul>
                            </div>
                        </div>
                    </div>
                    

                    <div class="form-group">
                        <label class="control-label col-sm-2">商品类目：</label>
                        <div class="col-sm-6">
                            <select id="goods_select" name="third_cat_id" class="m-r" style="width:250px;" data-toggle="select2">
                                <option value="">选择类型</option>
                                {foreach $catList as $vo}
                                <option value="{$vo.third_cat_id}">{$vo.first_cat_name} - {$vo.second_cat_name} - {$vo.third_cat_name}</option>
                                {/foreach}
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="control-label col-sm-2">商品品牌：</label>
                        <div class="col-sm-6">
                            <select id="goods_select" name="brand_id" class="m-r" style="width:250px;" data-toggle="select2">
                                <option value="">选择品牌</option>
                                {foreach $brandList as $vo}
                                <option value="{$vo.brand_id}">{$vo.name}</option>
                                {/foreach}
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="control-label col-sm-2 ">小程序路径</label>
                        <div class="col-sm-6 ">
                            <div class="help-inline">{:config('config.xcx_goods_path')}<span id="goods_id_html">1</span></div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </section>
    <footer class="footer bg-white b-t p-t">
        <div class="form-group">
            <div class="col-sm-4 col-sm-offset-1">
                <input type="hidden" name="tpl_id" value="{$row.tpl_id|intval}"/>
                <button type="submit" class="btn btn-primary js_save_submit" data-loading-text="保存中...">保存</button>
                <button type="button" class="btn btn-default" data-toggle="back">取消</button>
            </div>
        </div>
    </footer>
</section>
</form>
{literal}
<script type="text/html" id="skuTmp">
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>商品规格</th>
                <th>当前库存</th>
                <th>商品售价</th>
                <th>售卖价格（分）</th>
                <th>市场价格（分）</th>
                <th>库存</th>
            </tr>
        </thead>
        <tbody>
            {{each sub_goods as item index}}
            <tr>
                <td><label><input type="checkbox" name="sku_ids[{{item.sku_id}}]" value="{{item.sku_id}}" checked=""><span class="diy--checkbox diy--radioInput"></span>{{item.sku_name}}</label>
                </td>
                <td>{{item.goods_number}}</td>
                <td>{{item.shop_price}}</td>
                <td><input type="text" name="sku_sale_price[{{item.sku_id}}]" min="0" class="input-small" value="{{item.sale_price}}"></td>
                <td>
                    <input type="text" name="sku_market_price[{{item.sku_id}}]" min="0.01" class="input-small" data-rule-ismoney="true" value="{{item.market_price}}">
                </td>
                <td>
                    <input type="text" name="sku_stock_num[{{item.sku_id}}]" min="0.01" class="input-small" data-rule-ismoney="true" value="{{item.goods_number}}">
                </td>
            </tr>
            {{/each}}
        </tbody>
    </table>
</script>
{/literal}
<script type="text/javascript">
    function searchGoods() {
        var arr = new Object();
        arr.keyword = $('#goods_keyword').val();
        arr.min_search = 1;
        $('#goods_select').html('<option value="">选择商品</option>');
        var res = jq_ajax('{:url("shop/sys_admin.goods/pubSearch")}', arr);
        $.each(res.list, function (i, value) {
            $('#goods_select').append('<option value="' + value.goods_id + '">' + value.goods_name + '</option>');
        })
    }
    var is_spec = 0;
    var market_price = 0;
    var sale_price = 0;
    //选择商品
    function goodsSelect() {
        var goods_id = $('#goods_select').val();
        $('.goods_name').html('');
        jq_ajax('{:url("shop/api.goods/info")}', 'id=' + goods_id, function (res) {
            if (res.code == 0) {
                return false;
            }
            var goods = res.list.goods;
            $('#shop_goods_id').val(goods.goods_id);
            $('#goods_id_html').html(goods.goods_id);
            $('#name').val(goods.goods_name);
            market_price = goods.market_price;
            sale_price = goods.sale_price;
            //多规格处理
            if (goods.is_spec == 1){
               
                $('.tableBox').removeClass('hide');
                $('#tableBox').html(template('skuTmp',goods));
                $('.tableBox2').addClass('hide');
            }else{
                $('.tableBox').addClass('hide')
                $('.tableBox2').removeClass('hide');
                is_spec = 0;
                $('input[name="sale_price"]').val(goods.sale_price);
                $('input[name="market_price"]').val(goods.market_price);
                $('input[name="stock_num"]').val(goods.goods_number);
            }
            $('#imgsList').html('');
            $.each(res.list.imgsList,function (i,v) {
                $('#imgsList').append('<li><span class="item_box"><img src="'+v.goods_thumb+'"></span></li>');
            })
            $('#imgsList').find('li').click();
        });
    }
    $('#imgsList').on('click','li',function () {
        $('#imgsList').find('li').removeClass('select');
        $(this).addClass('select');
        $('#shop_goods_img').val($(this).find('img').attr('src'));
    })
</script>
{/block}
{block name="footer" }
<script type="text/javascript">
    seajs.use(["dist/plupload/init.js"])

</script>
{/block}